import createElement from "./createElement";
import updateChildren from "./updateChildren";

export default function patchVnode(oldVnode, newVnode) {
    console.log('是同一个节点，需要精细化比较')
    // 判断newVnode和oldVnode是不是同一个对象
    if (oldVnode === newVnode) return
    // 判断newVnode有没有text属性
    if (newVnode.text !== undefined && (newVnode.children === undefined || newVnode.children.length === 0)) {
        console.log('newVnode有text属性')
        if (newVnode.text !== oldVnode.text) {
            // 如果newVnode中的text和oldVnode中的text不一样，直接让newVnode的text写入oldVnode的elm中即可，如果oldVnode中是children，那么也会立即消失掉了
            oldVnode.elm.innerText = newVnode.text
        }
    } else {
        console.log('newVnode没有text属性')
        // 判断oldVnode有没有children
        if (oldVnode.children !== undefined && oldVnode.children.length > 0) {
            // oldVnode有children，此时就是newVnode和oldVnode都有children的情况，最复杂的情况
            updateChildren(oldVnode.elm, oldVnode.children, newVnode.children);
        } else {
            // oldVnode没有children，而newVnode有children
            // 清空oldVnode节点的内容
            oldVnode.elm.innerHTML = ''
            // 遍历newVnode的子节点，创建DOOM并且上树
            for (let i = 0; i < newVnode.children.length; i++) {
                let dom = createElement(newVnode.children[i])
                oldVnode.elm.appendChild(dom)
            }

        }
    }
}